import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'antd';

function convert(p) {
    if (!window.web) return
    return window.web.web3.utils.fromWei(p, "ether");
}

export default function Balance() {
    const {
        TokenWallet,
        TokenExchange,
        EtherWallet,
        EtherExchange
    } = useSelector((state) => state.balance);
    return (
        <div className="App">
            <Row gutter={16}>
                <Col span={6}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic
                            title="钱包里以太坊余额"
                            value={convert(EtherWallet)}
                            precision={3}
                            valueStyle={{ color: '#3f8600' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic
                            title="钱包里代币余额"
                            value={convert(TokenWallet)}
                            precision={3}
                            valueStyle={{ color: '#0000ff' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic
                            title="交易所里以太坊余额"
                            value={convert(EtherExchange)}
                            precision={3}
                            valueStyle={{ color: '#cf1332' }}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic
                            title="交易所里代币余额"
                            value={convert(TokenExchange)}
                            precision={3}
                            valueStyle={{ color: '#ec7400' }}
                        />
                    </Card>
                </Col>
            </Row>

            {/* <h3>Wallet ether count: {convert(EtherWallet)}</h3>
            <h3>Wallet token count: {convert(TokenWallet)}</h3>
            <h3>Exchange ether count: {convert(EtherExchange)}</h3>
            <h3>Exchange token count: {convert(TokenExchange)}</h3> */}
        </div>
    );
}